<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{},~{})">
    <title>有效签约审批</title>
    <style>
    .el-form-item__label{
    	width:120px;
    }
    </style>
</head>
<body>

<div v-loading="loading" id="organizationManage" class="organizationManage mainPadding"  style="display: none;">  

    <el-breadcrumb separator="/" class="elBreadcrumb marginB20" >
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>判单管理</el-breadcrumb-item>
        <el-breadcrumb-item>有效签约审批</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="marginB20">
        <el-button type="primary" @click="dealButton">有效性处理</el-button>
		<el-button type="success" @click="distributionPdzy">分配判单</el-button>
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
            <el-form :inline="true" class="demo-form-inline mainSearchForm">
        				<el-form-item label="处理状态:" label-width="55px">
            				<el-select filterable v-model="dealStatus" placeholder="处理状态" clearable>
            				    <el-option
            				      v-for="item in dealStatusList"
            				      :key="item.value"
            				      :label="item.label"
            				      :value="item.value">
            				    </el-option>
            				</el-select>
        				</el-form-item>
        				<el-form-item label="约束不一致:">
            				<el-select filterable v-model="constraint" placeholder="约束不一致" clearable>
            				    <el-option
            				      v-for="item in constraintList"
            				       :key="item.value"
            				      :label="item.label"
            				      :value="item.value">
            				    </el-option>
            				</el-select>
        				</el-form-item>
        				<el-form-item label="签约省份:">
            				<el-select filterable v-model="signProvince" placeholder="签约省份" clearable>
            				    <el-option
            				      v-for="item in provinceList"
            				      :key="item.name"
            				      :label="item.name"
            				      :value="item.name">
            				    </el-option>
            				</el-select>
        				</el-form-item>
        				<el-form-item label="签约项目:">
            				<el-select filterable v-model="signProjectId" placeholder="签约项目" clearable>
            				    <el-option
            				      v-for="item in projectList"
            				      :key="item.id"
            				      :label="item.projectName"
            				      :value="item.id">
            				    </el-option>
            				</el-select>
        				</el-form-item>
        				<el-form-item label="商务组:">
            				<el-select filterable v-model="businessGroupId" placeholder="商务组" clearable>
            				    <el-option
            				      v-for="item in swList"
            				      :key="item.id"
            				      :label="item.name"
            				      :value="item.id">
            				    </el-option>
            				</el-select>
        				</el-form-item>
                <el-row v-show="isShow">    
            				<el-form-item label="电销组:" label-width="55px">
                				<el-select filterable v-model="teleGroupid" placeholder="电销组" clearable>
                				    <el-option
                				      v-for="item in dxList"
                				      :key="item.id"
                				      :label="item.name"
                				      :value="item.id">
                				    </el-option>
                				</el-select>
            				</el-form-item>
            				<el-form-item label="签约单有效性:">
                				<el-select filterable v-model="valid" placeholder="签约单有效性" clearable>
                				    <el-option
                				      v-for="item in validList"
                				       :key="item.value"
                				      :label="item.label"
                				      :value="item.value">
                				    </el-option>
                				</el-select>
            				</el-form-item>

            				<el-form-item label="客户姓名:">
            				    <el-input v-model="cusName" placeholder="请输入客户姓名"></el-input>
            				</el-form-item>
									<el-form-item label="资源ID:">
										<el-input v-model="clueId" placeholder="资源ID"  @keyup.native="number"></el-input>
									</el-form-item>
									<el-form-item label="客户手机号:" >
										<el-input v-model="cusPhone" placeholder="客户手机号"></el-input>
									</el-form-item>
					<el-form-item label="判单专员:" label-width="55px">
						<el-select filterable v-model="pdUser" placeholder="判单专员" clearable>
							<el-option
									v-for="item in userInfoList"
									:key="item.id"
									:label="item.name"
									:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>


				</el-row>
                <div class="mainSearchBtnBox">
        				    <el-button icon="el-icon-search" type="primary" @click="search" class="searchBtn">搜索</el-button>
                    <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
                    <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span v-if="isShow">收起</span><span v-else>展开更多</span><i :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span>
                </div> 
            </el-form>
        </div>
        <el-row>
            <el-table 
                ref="multipleTable"
                tooltip-effect="dark"
                empty-text="无数据"
                style="width: 100%"
                border
                :data="dataTable"  @selection-change="handleSelectionChange">
                 <el-table-column align="center" prop="id" type="selection" width="55"></el-table-column> 
                 <el-table-column align="center" type="index"  label="序号" width="55"></el-table-column>
                 <!-- <el-table-column prop="date" label="全选" width="180"></el-table-column>  -->
                <el-table-column align="center" prop="signNo" label="签约单编号"></el-table-column>
                <el-table-column align="center" prop="customerName" label="客户姓名">
					<template slot-scope="scope">
						{{scope.row.customerName}}
						<span v-if="scope.row.inputType ==1">
                            <input type='hidden'><img th:src="@{/images/self_build.png}"  style="margin:0 10px;width:22px;cursor: pointer;vertical-align: middle;" alt="">
                        </span>
					</template>
				</el-table-column>
							  <el-table-column align="center" prop="cusPhone" label="客户手机号"></el-table-column>
                <el-table-column align="center"  prop="businessGroupName" label="商务小组" ></el-table-column>
                <el-table-column align="center" prop="signProvince" label="签约省份" ></el-table-column>
                <el-table-column align="center" prop="signCity" label="签约城市" ></el-table-column>
                <el-table-column align="center" prop="signDictrict" label="签约区/县" ></el-table-column>
                <el-table-column align="center" prop="signProjectName" label="签约项目" ></el-table-column>
                <el-table-column align="center" prop="constrainArea" label="约束区域" ></el-table-column>
                <el-table-column align="center" prop="constrainProject" label="约束项目" ></el-table-column>
                <el-table-column align="center" prop="teleGroupName" label="电销组" ></el-table-column>
                <el-table-column align="center" prop="teleSaleName" label="电销顾问" ></el-table-column>
                <el-table-column align="center" prop="constraintNotConsistency" label="约束不一致" ></el-table-column>
                <el-table-column align="center" prop="dealStatus" label="处理状态" :formatter="transformStatus"></el-table-column>
                <el-table-column align="center" prop="valid" label="有效性" :formatter="transvalidStatus"></el-table-column>
				<el-table-column align="center" prop="pdUserName" width="100" label="判单专员"></el-table-column>
            </el-table>
             <table-pagination :pager="pager"  @change="inviteAreaListPage"></table-pagination>
        </el-row>  
    </div>
    <!-- dialog -->
    <el-dialog title="有效性处理" :visible.sync="dialogFormVisible" width="540px">
        <el-form :model="form" ref="form" :rules="rules">
            <el-form-item label="有效性选择：" :label-width="formLabelWidth"  prop="status">
                <el-select filterable v-model="form.dealStatus" placeholder="有效性选择" style="width:80%;">
                    <el-option
                        v-for="item in statusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" style="text-align: center" class="dialog-footer">
            <el-button type="primary" :disabled="btnDisabled" @click="addValidbutton">提交</el-button>
            <el-button @click="dialogFormVisible= false">取消</el-button>
        </div>
    </el-dialog>

	<!-- dialog -->
	<el-dialog title="分配判单" :visible.sync="distributionPdzySyc" width="540px">
		<el-form :model="pdzyform" ref="pdzyform" :rules="pdzyrules">
			<el-form-item label="判单专员：" :label-width="formLabelWidth"  prop="pdUser">
				<el-select filterable v-model="pdzyform.pdUser" placeholder="组内判单专员" style="width:80%;">
					<el-option
							v-for="item in userInfoList"
							:key="item.id"
							:label="item.name"
							:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<div slot="footer" style="text-align: center" class="dialog-footer">
			<el-button type="primary" :disabled="btnDisabled" @click="addbutton('pdzyform')">提交</el-button>
			<el-button @click="distributionPdzySyc= false">取消</el-button>
		</div>
	</el-dialog>
</div>
<input id="addOrUpdate" type="hidden" >
</body>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">

    var dxList=[[${dxList}]];
	var projectList = [[${projectList}]];
	var provinceList = [[${provinceList}]];
	var swList = [[${swList}]];
	var userInfoList = [[${userInfoList}]];
    var orgVM =  new Vue({
        el: '#organizationManage',
        data: {
			distributionPdzySyc:false,
			pdzyform:{
				pdUser:""
			},
			pdUser:"",
			userInfoList:userInfoList,
            isShow:false,
            btnDisabled: false,
        	formLabelWidth: '150px',
        	form:{
        		dealStatus:"1"
        	},
        	dealStatusList:[
        		 {
               		value: '0',
                   label: '待处理'	
               	},
               	{
                  value: '1',
                   label: '已处理'	
                  }
        	  ],
        	  constraintList:[
        		  {
                  	value: '0',
                    label: '跨区域'	
                   },
                 	{
                    value: '1',
                     label: '项目不一致'	
                    },
                 	{
                     value: '2',
                      label: '跨区域，项目不一致'	
                     }
       	  	],
       	 	statusList:[
       	 	 	{
               	 value: '0',
                 label: '无效'	
                },
              	{
                 value: '1',
                  label: '有效'	
                 }
       	 	],
       	 validList:[
       		{
                value: '1',
                 label: '有效'	
                },
    	 	 	{
            	 value: '0',
              label: '无效'	
             }
           	
    	 	],
       	 	dataTable:[],
       	 	multipleSelection: [],
       	    provinceList:provinceList,
       	    projectList:projectList,
       	    swList:swList,
       	    dxList:dxList,
       	 	cusName:"",
       	 	dealStatus:"",
       	 	constraint:"",
       	 	signProvince:"",
       	 	signProjectId:"",
			clueId:"",
			cusPhone:"",
       	 	businessGroupId:"",
       	 	teleGroupid:"",
       	 	valid:"",
            pager:{
                total: 0,
                currentPage: 1,
                pageSize: 20,
            },
            loading:false,
            dialogFormVisible: false,
            rules: {
            	status: [
                    { required: true, message: '请选择有效性', trigger: 'blur' }
                ]
            },
			pdzyrules:{
				pdUser: [
					{ required: true, message: '请选择判单专员', trigger: 'blur' },
				]
			},
             
        },
        methods: {
        	dealButton(){
        		
        		var rows = this.multipleSelection;
        		  if(rows.length <1){
                      this.$message({
                         message: '选择某一条或者多条签约信息',
                         type: 'warning'
                       });
                      return;
                  }
        		  //如果只选择一条回显数据，多条不回显
        		  if(rows.length ==1){
        			  for(var i =0;i<orgVM.dataTable.length;i++){
        				  if(orgVM.dataTable[i].id ==rows[0].id){
        					   if(!"undefined" == orgVM.dataTable[i].valid){
        						  orgVM.form.dealStatus = orgVM.dataTable[i].valid+"";  
        					  }else{
        						  orgVM.form.dealStatus = "1";  
        					  } 
        				  }
        			  }
        			  
        		  }
                this.dialogFormVisible = true;
        	},
        	
        	transformStatus(row, column, cellValue, index) {
          	  var text="";
                if(cellValue=="0"){
              	  text="待处理"
                }else if(cellValue=="1"){
              	  text="已处理"
                }
                return text;
            },
            transvalidStatus(row, column, cellValue, index) {
            	  var text="";
                  if(cellValue=="0"){
                	  text="无效"
                  }else if(cellValue=="1"){
                	  text="有效"
                  }
                  return text;
              },
            
        	handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            search(){
            	this.pager.currentPage = 1;
            	this.inviteAreaListPage()
            },
        	inviteAreaListPage(){//查询按钮
            	  var param = {}; 
            	  var pageSize = this.pager.pageSize;
                  var pageNum = this.pager.currentPage;
                  var dealStatus = this.dealStatus;
                  var constraint = this.constraint;
                  var signProvince = this.signProvince;
                  var signProjectId = this.signProjectId;
                  var businessGroupId = this.businessGroupId;
                  var teleGroupid = this.teleGroupid;
                  var valid = this.valid;
                  var cusName = this.cusName;
                  
                  param.dealStatus = dealStatus;
                  param.valid = valid;
                  param.pageNum = pageNum;
                  param.pageSize = pageSize;
                  if(constraint =='0'){
                	  param.spanningArea =1
                  }else if(constraint =='1'){
                	  param.projectInconsistency =1
                  }else if(constraint =='2'){
                	  param.projectInconsistency =1
                	  param.spanningArea =1
                  } 
                  param.signProvince = signProvince;
                  param.signProjectId = signProjectId;
                  param.businessGroupId = businessGroupId;
                  param.teleGroupid = teleGroupid;
                  param.customerName = cusName;
                  param.cusPhone = this.cusPhone;
                  param.clueId = this.clueId;
				param.pdUser = this.pdUser;
                  axios.post('/businesssign/businessSignValidList',param).then(function (response) {
                  	//   console.log(response);
                      if(null===response||response.data==null||response.data.code!='0'){
	                  	  alert(response.data.msg);
	                  	  return ;
                     }else{
                    	 orgVM.dataTable =response.data.data.data; 
                    	 orgVM.pager.currentPage= response.data.data.currentPage;
                    	 orgVM.pager.total= response.data.data.total;
                     } 
                  })
                  .catch(function (error) {
                    console.log(error);
                  })
                  .then(function () {
                  });  
                  
              	} ,
                addValidbutton(){
              		var rows = this.multipleSelection;
                    if(rows.length <1){
                        this.$message({
                           message: '选择某一条或者多条签约信息',
                           type: 'warning'
                         });
                        return;
                    }
                    var ids="";
     		            if(null!=rows){
     		             for ( var i = 0; i <rows.length; i++){
     		            	if("" == ids){
     		            		ids = rows[i].id
     		            	}else{
     		            		ids = ids+","+rows[i].id
     		            	}
     		             }
                    	}
     		           var param={};
    		           param.ids=ids;
                       param.valid = this.form.dealStatus;
                       
                       this.btnDisabled = true;  

    		           axios.post('/businesssign/updateBusinessSignDTOValidByIds',param).then(function (response) {
                            // console.log(response);
                            if(null !==response && response.data !=null && response.data.code=='0'){
                              orgVM.btnDisabled = false; 
	                    	  window.location.href="/businesssign/businessSignValidPage"; 
	                     }else{
                            alert(response.data.data.message);
                            orgVM.btnDisabled = false; 
	                  	  	return ;
	                     } 
	                  }).catch(function (error) {
                       console.log(error);
                       orgVM.btnDisabled = false; 
                   })
                   .then(function () {
                     // always executed
                   });
              	},
                toogleClick(){
                  if(this.isShow){
                      this.isShow=false
                  }else{
                      this.isShow=true
                  }          
                },
			distributionPdzy(){
				var rows = this.multipleSelection;
				if (this.$refs['pdzyform']!=undefined) {
					this.$refs['pdzyform'].resetFields();
				}
				if(rows.length  <1){
					this.$message({
						message: '请选择数据',
						type: 'warning'
					});
					return;
				}
				this.distributionPdzySyc = true;
			},
			addbutton(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var param = {};
						var idList = [];
						var rows = this.multipleSelection;
						for ( var i = 0; i <rows.length; i++){
							idList.push(rows[i].id)
						}
						param.idList = idList;
						param.pdUser = this.pdzyform.pdUser;
						axios.post('/businesssign/distributionPdUser', param).then(function (response) {
							if(response.data.data){
								orgVM.distributionPdzySyc = false;
								orgVM.search();
							}else{
								orgVM.$message({
									message: '分配失败请重试',
									type: 'warning'
								});
							}

						});
					}


				})
			},
        },
        created(){
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.pager.pageSize = localVal;}
        	this.inviteAreaListPage();
        	document.getElementById('organizationManage').style.display = 'block';
        }
    })
</script>
</html>